<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="/assets/jquery.1.11.js"></script>
</head>
<body>

选择头像:<input type="file" id="f" onchange="upload()" />

<img src=""/>
<script type="text/javascript">
function upload(){
    //实例化一个空FormData
    var fd = new FormData();
    //单独取出文件对象
    //获取文件域中的文件对象 FileList document.getElementByName('gender')
    //文件域中有files属性，能够获取到选择好的文件对象
    var file_obj = document.getElementById('f').files[0];
    //console.log(file_obj);

    //append用来向FormData对象中追加数据
    //参数1: key 下标
    //参数2: value 值
    fd.append('pic', file_obj);
    //普通的表单域，后台使用$_POST来接收
    //fd.append('filename', '123.jpg');

    //发送ajax请求，将fd一起发到后台php程序
    $.ajax({
        url: 'upload.php',
        type: 'post',
        data: fd,
        dataType: 'text',
        contentType: false,
        processData: false,
        success:function(msg){
            $('img').attr('src', msg);
        }
    });
}


</script>
</body>
</html>